<template>
	<view class="recommend">
		<view class="title">
			<a href="/"><span>全部</span></a>
		</view>
		<view class="reco-main">
			<recoItem v-for="(item ,index) in data" :title="item.title" :recoId="item.recoId"
				:waterfallImg="item.waterfallImg" :profileImg="item.profileImg" :avatarName="item.avatarName"
				:zan="item.zan" @fromChild="fromChild">
			</recoItem>
		</view>
	</view>
</template>

<script>
	import {
		data
	} from "@/static/json/recoItem.json"
	import recoItem from "../recoItem/recoItem.vue"
	export default {
		data() {
			return {
				data: data,
			}
		},
		components: {
			recoItem
		},
		methods: {
			fromChild(e, v) {
				console.log(e, v)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recommend {
		margin: 0 10px;
		height: 100%;
	}

	.title {
		background-color: #fff;
		margin: 6px 0;
		padding: 4px;
		border-radius: 4px;
	}

	.title>a {
		text-decoration: none;
		color: #000000;
	}

	.reco-title>a:hover {
		color: #007AFF;
	}

	.reco-main {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-row-gap: 10px;
		grid-column-gap: 10px;
	}
</style>
